<template>
	<view>
		<view class='top'>
			<u-row align='top'>
				<u-col :span='6'>
					<view>
						<view style='color:#f3f3f3'>钱包余额(元)</view>
						<view style='font-size:32px;padding-top:5px;color:#fff'>
							<text style='font-size:20px'>￥</text>
							<text v-if='showAmount' @click='showAmount = false'>{{amount}}</text>
							<text v-else @click='showAmount = true'>*****</text>
						</view>
					</view>
				</u-col>
				<u-col :span='6'>
					<view @click='toUrl("/pages/wallet/withdrawal-logs")'>
						<u-icon name="arrow-right" color='#f3f3f3' label='提现记录' labelColor='#f3f3f3'
							labelPos='left'></u-icon>
					</view>
				</u-col>
			</u-row>
			<view style='padding-top:20px'>
				<u-row>
					<u-col :span='8'>
						<view @click='toUrl("/pages/wallet/settle-item?settled=0")'>
							<view style='color:#f3f3f3;align-items: left;position:absolute;'>
								<u-icon name="arrow-right" color='#f3f3f3' label='待到账(元)' labelColor='#f3f3f3'
									labelPos='left'></u-icon>
							</view>
							<view style='font-size:28px;padding-top:20px'>
								<text style='font-size:20px'>￥</text> {{beSettleAmount}}
							</view>
						</view>
					</u-col>
					<u-col :span='4'>
						<view>
							<u-button @click='withdrawal' type='success' text='提现' shape='circle' size='large'
								:plain='true'></u-button>
						</view>
					</u-col>
				</u-row>
			</view>
		</view>
	<!-- 	<view style='padding:20px 10px;color：#fff;font-weight: bold;'>
			<u-row>
				<u-col span='6'>
					<view class='btn-left'>
						<u-row @click='toUrl("/pages/index/balance-logs")'>
							<u-col span='4'>
								<u-avatar
									src="https://picture.jmgc.vip/02726e69-2576-462f-8c12-bce97868a097.png"></u-avatar>
							</u-col>
							<u-col span='6'>
								<view style='color:#fff'>余额明细</view>
							</u-col>
							<u-col span='2'>
								<u-icon name="arrow-right" color='#fff'></u-icon>
							</u-col>
						</u-row>
					</view>
				</u-col>
				<u-col span='6'>
					<view class='btn-right'>
						<u-row @click='toUrl("/pages/index/settle-item")'>
							<u-col span='4'>
								<u-avatar
									src="https://picture.jmgc.vip/93e056ac-b715-438e-9b08-9a50602d35d2.png"></u-avatar>
							</u-col>
							<u-col span='6'>
								<view style='color:#fff'>收入明细</view>
							</u-col>
							<u-col span='2'>
								<u-icon name="arrow-right" color='#fff'></u-icon>
							</u-col>
						</u-row>
					</view>
				</u-col>
			</u-row>
		</view> -->
		<view style='padding:20px 10px 0px 10px' @click='toUrl("/pages/wallet/bank-card")'>
			<u-row>
				<u-col span='8'>
					<view style='font-size:20px;color:#606266;font-weight: bold;'>钱包绑定银行卡
					</view>
				</u-col>
				<u-col span='4'>
					<view style='float: right;'>
						<u-icon name="arrow-right" color='#909399' size='22'></u-icon>
					</view>
				</u-col>
			</u-row>
			<view style='padding-top:20px'>
				<view v-if='account != ""'>
					<view style='padding:20px 10px;background-color: #3E73D3;color:#fff;border-radius: 10px;'>
						<u-row>
							<u-col span='2'>
								<u-avatar
									src="https://picture.jmgc.vip/272f2132-1936-4d67-b1f0-1101b5aa732e.png"></u-avatar>
							</u-col>
							<u-col span='10'>
								<view style='text-align: left;font-weight: bold;'>
									{{account.qryCashCardInfoList[0].bank_name}}
								</view>
								<view style='text-align: left;padding-top:10px'>
									**** **** **** ****
									{{account.qryCashCardInfoList[0].card_no.substr(account.qryCashCardInfoList[0].card_no.length - 4)}}
								</view>
							</u-col>
						</u-row>
					</view>
				</view>
				<view v-else>
					<view stype='padding:20px 10px'>
						<view
							style='padding:20px 10px;text-align: center;border: solid #909399 1px;border-radius: 10px;'>
							注册钱包</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				amount: 0,
				account: '',
				titleStyle: 'paddint-top:72px;background-color: #f3f3f3',
				beSettleAmount: 0,
				showAmount: false
			}
		},
		onLoad(){
		},
		onShow() {
			this.request.get(`api/huifu-accounts`).then((res) => {
				if(res.data.length == 0){
					uni.showModal({
						title: '', 
						content: '您还没有注册钱包，是否注册？',
						success: (data) => {
							if(data.confirm){
								uni.navigateTo({
									url: '/pages/wallet/bank-card'
								})
							}
						}
					})
				}else{
					console.log('account',res.data)
					this.account = res.data[0]
					// 有钱包，查钱包余额
					this.request.get(`api/huifu-accounts/${this.account.id}/balance`).then((res) => {
						console.log('huifuBalance',res.data)
						this.amount = res.data[0].balance_amt
					})
					this.request.get(`api/settle-items`,{
						'@filter': `entity.getSettled() == false`,
						'@select': `SUM(entity.amount) as amount`
					}).then((res) => {
						console.log(res.data)
						if(res.data && res.data.length > 0 && res.data[0].amount){
							this.beSettleAmount = res.data[0].amount
						}
					})
				}
			})
		},
		methods: {
			toUrl(page){
				uni.navigateTo({
					url: page
				})
			},
			withdrawal(){
				uni.navigateTo({
					url: '/pages/wallet/withdrawal'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.btn-left {
		background-color: #239965;
		border-radius: 15px;
		margin-right: 5px;
		padding: 10px;
		border: solid #f3f3f3 1px;
	}

	.btn-right {
		background-color: #239965;
		border-radius: 15px;
		margin-left: 5px;
		padding: 10px;
		border: solid #f3f3f3 1px;
	}

	// .content{
	// 	background-color: #f3f3f3;
	// 	color: #909399;
	// 	min-height: 100vh;
	// 	overflow: auto;
	// }
	.top {
		background: linear-gradient(to bottom, #239965, #71d5a1);
		padding: 20px 15px;
		// margin: 10px 10px 0px 10px;
		border-radius: 0px 0px 10px 10px;
		color: #fff;
	}

	.full-image-view {
		width: 100vw;
		height: calc(100vw * 1.5 / 3);
		background: linear-gradient(90deg, #262f27, #ffd591);
	}

	.name {
		color: #fff;
		font-size: 23px;
		margin-left: 10px;
		text-shadow: 0 0 1px #999, 0 0 2px #999;
	}

	.point {
		margin: -80px 10px 10px 10px;
		background-color: #fff;
		border-radius: 20px;
		padding: 20px 10px;
	}

	.grid-text {
		font-size: 14px;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}

	.level {
		font-size: 16px;
	}

	.container {
		background-color: #f5f7fa;
		min-height: 100vh;
	}

	.content {
		padding: 20rpx;
	}

	.balance-container {
		margin-top: 30rpx;
	}

	.balance-card,
	.points-card {
		border-radius: 16rpx;
		padding: 40rpx 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

		.label {
			font-size: 28rpx;
			color: #606266;
			margin-bottom: 15rpx;
		}

		.value {
			font-size: 48rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
		}

		.hint {
			font-size: 24rpx;
			color: #909399;
		}
	}

	.balance-card {
		background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
		color: #fff;

		.label,
		.hint {
			color: rgba(255, 255, 255, 0.9);
		}
	}

	.points-card {
		background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
		color: #fff;

		.label,
		.hint {
			color: rgba(255, 255, 255, 0.9);
		}
	}
</style>